@import '../../less/base/mixins.less';
@import '../../less/base/variables.less';
/* === Calendar === */
.kui-calendar{
	position:absolute;
	height: 300px;
	width: 100%;
	.picker-modal-inner {
        overflow: hidden;
		position:absolute;left:0;top:0;
		width:100%;
		height:100%;
		display:-webkit-box;display:box;
		-webkit-box-orient:vertical;
		box-orient:vertical;
    }
	@media (orientation: landscape) and (max-height: 415px) {
        &:not(.picker-modal-inline) {
            height: 220px;
        }
    }
}
.kui-calendar .kui-layer-content{
	overflow:hidden;
	height:270px;
}

//修复toolbar
.kui-calendar .toolbar-inner {
    height: 2.2rem;
	max-width:370px;
	margin:auto;
    .flexbox();
    text-align: center;
	a.icon-only {
		display:block;
        width: 36px;
    }
    span {
		display:block;
        .box-flex(1);
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.picker-calendar-month-picker,
.picker-calendar-year-picker{
	.flexbox();
	.box-flex(1);
	width:50%;
}

.picker-calendar-week-days {
    height: 18px;
    background: #f7f7f8;
    .flexbox();
    .hairline(bottom, #c4c4c4);
    font-size: 11px;
    box-sizing: border-box;
    position: relative;
    .picker-calendar-week-day {
        .box-flex(1);
        line-height: 17px;
        text-align: center;
    }
    + .picker-calendar-months {
		.box-flex(1);
    }
}
//内容
.picker-calendar-months {
    width: 100%;
    overflow: hidden;
    position: relative;
	.flexbox();
}
.picker-calendar-months-wrapper {
    position: relative;
    width: 100%;
    transition: 300ms;
}
.picker-calendar-month {
    .flexbox();
	.box-orient(vertical);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.picker-calendar-row {
    .flexbox();
	.box-flex(1);
    width: 100%;
    position: relative;
    border-bottom:#ccc solid 1px;
    &:last-child {
        border-bottom:none;
    }
	div{
		.flexbox();
		.box-flex(1);
		.prefix(box-pack,center);
		.prefix(box-align,center);
	}
}
.picker-calendar-day {
    .flexbox();
	.box-flex(1);
	
	
    box-sizing: border-box;
    text-align: center;
    color: @color-text;
    font-size: 15px;
    cursor: pointer;
    &.picker-calendar-day-weekend {}
    &.picker-calendar-day-prev,
    &.picker-calendar-day-next {
        color: @color-grey-active;
    }
    .picker-calendar-month-prev &,
    .picker-calendar-month-next & {}
    &.picker-calendar-day-disabled {
        color: #d4d4d4;
        cursor: auto;
    }
    &.picker-calendar-day-today span {
        background: #e3e3e3;
    }
    &.picker-calendar-day-selected span {
        background: @color-primary;
        color: #fff;
    }
    span {
        display: inline-block;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
	@media (orientation: landscape) and (max-height: 415px) {
		span{
			width:22px;
			height:22px;
    	    line-height:22px;
		}
	}
}


// 年份和月份选择器
// ===================================================================================
.picker-calendar-active{z-index: 16;}
.picker-calendar-years-picker,
.picker-calendar-months-picker {
    position: absolute;
    top: 0;
    left: 0;
	width:100%;height:100%;
    background: #fff;
    transition-property: transform;
    transition-duration: .3s;
    transform: translate3d(0, 100%, 0);
	-webkit-transform: translate3d(0, 100%, 0);
    .hairline(top, @color-default);
	display:none;
}
// 年份选择器
.picker-calendar-years-picker {
    .picker-calendar-years-picker-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        transition-property: transform;
        transition-duration: .3s;
    }
    .picker-calendar-years-group {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
		.flexbox();
		.box-orient(vertical);
    }
    .picker-calendar-year-unit {
        .flexbox();
        .prefix(box-pack,center);
		.prefix(box-align,center);
        flex: 1;
        text-align: center;
        span {
            display: block;
            width: 100%;
        }
        
    }
}
.picker-calendar-months-picker-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	transition-property: transform;
	transition-duration: .3s;
}
.picker-calendar-months-group {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	.flexbox();
	.box-orient(vertical);
}
.current-calendar-year-unit,.current-calendar-month-unit{
	background: #e3e3e3;
}

.picker-calendar-month-unit-selected,.picker-calendar-year-unit-selected {
	color: #fff;
	background: @color-primary;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .picker-calendar-years-picker:before,
    .picker-calendar-months-picker:before {
        transform: scaleY(0.5);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .picker-calendar-years-picker:before,
    .picker-calendar-months-picker:before {
        transform: scaleY(0.33);
    }
}
